<%@page contentType="text/html;charset=UTF-8"%>
<%@page pageEncoding="UTF-8"%>
<%@ page session="false" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>

<html>
<head>
	<META  http-equiv="Content-Type"  content="text/html;charset=UTF-8">
	<title>Messages of reports</title>
	<link rel="stylesheet"
		href="<c:url value="/WEB-INF/resources/css/screen.css" />"
		type="text/css" media="screen, projection">
		
	
	<style>
		.error {
			color: #ff0000;
		}
		
		.errorblock {
			color: #000;
			background-color: #ffEEEE;
			border: 3px solid #ff0000;
			padding: 8px;
			margin: 16px;
		}
		
		.inputcss {
			background-color: #E7EFFC;
		}
	</style>
</head>
<body>
	
	<form:form method="POST" commandName="formModel">
	
	<form:errors path="*" cssClass="errorblock" element="div"/>
	
	<center>
		<div id="bodyContenedor" style="margin-top:100px;">
			<div id="cabecera" style="margin-bottom:30px;">
				<table cellspacing="0" cellpadding="0" style="border: solid 1px #9CB1E2;">
					<tr>
						<th align="left" style="border: solid 1px #9CB1E2;padding:5px;" colspan="4">
							Summary of message reports
						<th>
					<tr>
					<tr>
						<td style="border: solid 1px #9CB1E2;">
							<table cellpadding="5px;">
								<tr>
								  <th rowspan="2">Date of range: </th> <td>
								  		<form:radiobutton path="dateRange" value="A" /> View All
								  </td>
								  <td><form:errors path="dateRange" cssClass="error" /></td>
								</tr><tr>
								  <td ><form:radiobutton path="dateRange" value="R" /> From</td>
									<td style="vertical-align: bottom; text-align: right;">
										<form:input path="fromDate" name="fromDate" size="10" maxlength="10" cssClass="inputcss" />
										<form:input path="fromHours" name="fromHours" size="2" maxlength="2" cssClass="inputcss" cssStyle="width:30px;"/>
										: 
										<form:input path="fromMinutes" name="fromMinutes" size="2" maxlength="2" cssClass="inputcss" cssStyle="width:30px;"/>
									</td>
									<td><form:errors path="fromDate" cssClass="error" /></td>
									<td style="width:10px;"></td>
									<td >To</td>
									<td style="vertical-align: bottom; text-align: right;">
										<form:input path="toDate" name="toDate" size="10" maxlength="10" cssClass="inputcss" />
										<form:input path="toHours" name="tohours" size="2" maxlength="2" cssClass="inputcss" cssStyle="width:30px;"/>
										: 
										<form:input path="toMinutes" name="toMinutes" size="2" maxlength="2" cssClass="inputcss" cssStyle="width:30px;"/>
									</td>
									<td><form:errors path="toDate" cssClass="error" /></td>
								</tr>
							</table>
						</td>
					</tr>
					<tr>
						<td style="border: solid 1px #9CB1E2;">
						<table cellpadding="5px;">
							<tr>
								<th>Filter by: </th>
								<td><form:radiobutton path="radioValue" value="S" />
									Code App.
								</td>
							<td>
								<form:input path="service" name="service" size="20" cssClass="inputcss" />   
							</td>
							<td style="width:5px;"></td>
							<td ><form:radiobutton path="radioValue" value="A" />Inbound Service URI</td>
							<td >
								<form:input path="application" name="application" size="30" cssClass="inputcss" />  
							</td>
							<td><form:errors path="radioValue" cssClass="error" /></td>
						</tr>
						</table></td></tr>
					<tr>
						<td style="border: solid 1px #9CB1E2;padding:5px;" align="center">
							<input type="submit" value="Search">
						</td>
					</tr>
				</table>
		</div>
		<div id="resultados" style="margin-top:30px;" >
			<table style="border: solid 1px #9CB1E2;" cellspacing="0" cellpadding="0">
				<tr>
					<th style="border: solid 1px #9CB1E2;padding:5px;width:170px;" align="center" >
						Proxy Service
					</th>
					<th style="border: solid 1px #9CB1E2;padding:5px;width:270px;" align="center" >
						Application Client
					</th>
					<th style="border: solid 1px #9CB1E2;padding:5px;width:105px;" align="center" >
						Nº Access
					</th>
				</tr>
					<c:forEach items="${formModel.resultsOSBData}" var="osbData">
						<tr>
							<td style="border: solid 1px #9CB1E2;padding:5px;" align="center">${osbData.application}</td>
							<td style="border: solid 1px #9CB1E2;padding:5px;" align="center">${osbData.service}</td>
							<td style="border: solid 1px #9CB1E2;padding:5px;" align="center">${osbData.access}</td>
						</tr>
					</c:forEach>
					
				</table>
		</div>
	</div>
			</center>
	</form:form>
</body>
</html>
